<template>
    <van-form @submit="onSubmit">
        <img src="https://shop.fed.lagou.com/uploads/attach/2021/08/20210819/d47ccb7cb87ab968e9ed35409b7816c1.png"
             class="logo">
        <van-cell-group inset>
            <van-field
                    v-model="form.username"
                    name="用户名"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
                    v-model="form.password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                    v-if="loginMode === 0"
            />
            <van-field
                    v-model="form.sms"
                    center
                    clearable
                    label="短信验证码"
                    placeholder="请输入短信验证码"
                    v-if="loginMode === 1"
            >
                <template #button>
                    <van-button size="small" type="primary">发送验证码</van-button>
                </template>
            </van-field>
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
                登录
            </van-button>
        </div>

        <p class="login-mode" @click="changeLoginMode">{{changeLoginModeDesc}}</p>
    </van-form>
</template>

<script setup>
  import { ref, computed, reactive } from 'vue'
  import { useStore } from 'vuex'
  import { useRouter, useRoute } from 'vue-router'
  import { Toast } from 'vant'
  import { loginByPassword } from '@/api/login.js'

  const store = useStore()
  const router = useRouter()
  const route = useRoute()

  const loginMode = ref(0) // 0 - 密码登录，1 - 验证码登录
  const changeLoginMode = () => {
    if (loginMode.value === 0) {
      loginMode.value = 1
    } else {
      loginMode.value = 0
    }
  }
  const changeLoginModeDesc = computed(() => {
    if (loginMode.value === 0) {
      return '快速登录'
    } else {
      return '密码登录'
    }
  })

  const form = reactive({
    username: '17201234567',
    password: 'qwer1234',
  })
  const onSubmit = async () => {
    if (loginMode.value === 0) {
      const username = form.username.trim()
      const password = form.password.trim()
      if (!username) {
        Toast.fail('请输入用户名')
        return
      }
      if (!password) {
        Toast.fail('请输入密码')
        return
      }
      const { status, data } = await loginByPassword(username, password)
      console.log(data)
      if (status === 200) {
        store.commit('setUserToken', data.token)
        if (route.query.redirect) {
          router.push(route.query.redirect)
        }  else {
          router.push({ name: 'user' })
        }

      } else {
        Toast.fail('用户名或密码错误！')
      }
    } else {

    }
  }
</script>

<style lang="scss" scoped>
    .logo {
        width: 100%;
        padding: 70px 0 10px;
    }

    .login-mode {
        text-align: center;
        font-size: 14px;
        color: #999;
    }
</style>
